<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <br /><br />
    <center>
      <div>
        商品名称：<input type="text" v-model="name" /> <br />
        <br />
        商品价格：<input type="text" v-model="price" /> <br />
        <br />
        商品分类：<select id="select"
          ><option
            v-for="(item, index) in cate_list"
            :key="index"
            :value="item.id"
            >{{ item.cname }}</option
          ></select
        >
        <br /><br />
        商品标签：
        <div>
          <TagInput
            v-model="tags"
            type="string"
            split=","
            placeholder="请输入标签，点击回车确认"
          ></TagInput>
        </div>
        <br /><br />
        商品简介：<textarea v-model="desc" v-autosize></textarea> <br /><br />
        颜色：<input type="text" v-model="color" /> <br />
        <br />
        型号：<input type="text" v-model="size" /> <br /><br />
        季节：<input type="text" v-model="season" /> <br />
        <br />
        商品头图：<input type="file" id="img" /> <br />
        <br />
        演示视频：<input type="file" id="video" /> <br />
      </div>
      <br /><br />
      <Button color="green" @click="submit">添加</Button>
    </center>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";

export default {
  data() {
    return {
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "商品添加" }
      ],
      cate_list: [],
      name: "",
      price: "",
      desc: "",
      color: "",
      size: "",
      season: "",
      tags: ""
    };
  },
  mounted: function() {
    this.axios({
      url: "http://localhost:8000/CategoryInfo/"
    }).then(res => {
      this.cate_list = res.data;
    });
  },
  methods: {
    // 添加商品
    submit: function() {
      // 拼接商品规格
      var param = {};
      param["color"] = this.color;
      param["size"] = this.size;
      param["season"] = this.season;
      //   格式化字符串
      param = JSON.stringify(param);

      //   声明参数类型
      let formData = new FormData();
      // 查找文件对象
      var img = document.getElementById("img").files[0];
      var video = document.getElementById("video").files[0];
      var sel = document.getElementById("select");
      //   添加文件及商品信息
      formData.append("name", this.name);
      formData.append("price", this.price);
      formData.append("desc", this.desc);
      formData.append("param", param);
      formData.append("img", img);
      formData.append("video", video);
      formData.append("cid", sel.value);
      this.axios({
        url: "http://localhost:8000/addgoods/",
        method: "post",
        data: formData
      }).then(res => {
        if (res.data.gid) {
          var gid = res.data.gid;
          // 只有商品入库成功才添加标签
          this.axios({
            url: "http://localhost:8000/inserttags/",
            params: { tags: this.tags, gid: gid }
          }).then(res => {
            this.$Message(res.data.msg);
          });
        }
      });
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter
  }
};
</script>
 
<style>
</style>